{% extends 'home/public/base.html' %}

{% block title %}

<title>我的订单</title>

{% endblock %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="/static/home/css/order.css">
    <link rel="stylesheet" type="text/css" href="/static/home/css/order-app.css">
{% endblock %}


{% block con %}

<div class="mainbody order">
    <div class="container">
        <!-- 面包屑导航 -->
        <div class="crumbs col-xs-12 col-sm-12">
            <ol class="breadcrumb">
                <li class="hidden-xs hidden-sm"><a href="index.html">首页</a></li>
                <li class="hidden-xs hidden-sm"><a href="member.html">我的商城</a></li>
                <li class="active">我的订单</li>
            </ol>
        </div><!-- 面包屑导航 E-->
        
        <div class="main clearfix">
            <!-- 左侧导航 -->
            <div class="left-nav f-fl col-md-4 hidden-xs hidden-sm">
                <div class="nav-main">
                    <a href="{% url 'myhome_myorder' %}" class="type-title"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>订单中心</a>
                    <a href="myorder.html" class="ml active">我的订单</a>
                    <a href="#" class="ml ">我的回购单</a>
                    <a href="#" class="ml ">我的意外保</a>
                    <a href="{% url 'myhome_mycenter' %}" class="type-title"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>个人中心</a>
                    <a href="{% url 'myhome_mysite' %}" class="ml ">地址管理</a>
                    <a href="#" class="ml ">我的收藏</a>
                    <a href="#" class="ml ">消息提醒</a>
                    <a href="#" class="ml ">建议反馈</a>
                </div>
            </div><!-- 左侧导航 E-->
            <!-- 右侧内容展示 -->
            <div class="right-content f-fr col-md-8 col-xs-12 col-sm-12">
                <div class="order-main">
                    <div class="type-tab-btn">
                        <a href="javascript:;" class="allOrder active col-20" data-type="-1">全部订单</a><i class="line hidden-xs hidden-sm">|</i>
                        <a class="waitPay col-20" href="javascript:;" data-type="0">待付款<span class="amount _actAmount"></span></a><i class="line hidden-xs hidden-sm">|</i>
                        <a class="waitDeliver col-20" href="javascript:;" data-type="1">待发货</a><i class="line hidden-xs hidden-sm">|</i>
                        <a class="hasDeliver col-20" href="javascript:;" data-type="2">已发货</a><i class="line hidden-xs hidden-sm">|</i>
                        <a class="other col-20" href="javascript:;" data-type="99">其他</a>
                    </div>
                    <div class="list-head hidden-xs hidden-sm">
                    <ul class="clearfix">
                        <li class="w50">
                            <select id="checkType" class="check-type">
                                <option value="0">近三个月的订单</option>
                                <option value="1">全部订单</option>
                            </select>
                            订单明细
                        </li>
                        <li class="w125">售后</li>
                        <li class="w125">金额</li>
                        <li class="w125">状态</li>
                        <li class="w125">操作</li>
                    </ul>
                    </div>
                    <div id="tableList" class="type-contain ui-load-container">
                        <div class="ui-load-content"><input id="unPayNum" value="0" type="hidden">
                            <table class="orderItem">
                                <tbody>
                                {% for v in orderlist %}
                                    <tr class="trHead hidden-xs hidden-sm">
                                        <td colspan="4" class="title clearfix">
                                          <div class="f-fl">
                                            下单时间：<span class="time">{{ v.addtime|date:'Y-m-d H:i:s' }}</span>
                                            订单号：<span class="orderNumber">{{ v.id }}</span>
                                          </div>
                                        </td>
                                    </tr>
                                    <tr class="list-box b-l b-r b-b">
                                        <td class="list b-r j-iamCart">
                                            <div class="cart-wrap j-CartWrap">
                                                <div class="shop j-shop j-amLight">
                                                {% for vv in v.orderinfo_set.all %}
                                                    <div class="item b-t clearfix j-item j-iamMain">
                                                        <a class="productDetail nameWidth col-xs-4 col-sm-4" href="#" target="_blank">
                                                            <img src="{{ vv.goodsid.pic }}" class="f-fl">
                                                        </a>
                                                        <div class="describe f-fl col-xs-8 col-sm-8">
                                                            <div class="vertic clearfix">
                                                                <span class="clearfix">
                                                                    <a class="productDetail nameWidth" href="#" target="_blank">
                                                                    <i>{{ vv.goodsid.title }}</i> </a>
                                                                    <p>
                                                                    ￥{{ vv.price }}×{{ vv.num }}
                                                                    </p>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                {% endfor %}

                                                </div>
                                            </div>
                                        </td>
                                        <td class="b-r w125 center price b-t hidden-xs hidden-sm">
                                            <div class="priceDiv">
                                                ￥ {{ v.totalprice }}
                                                
                                            </div>
                                        </td>
                                        <td class="b-r w125 center state b-t hidden-xs hidden-sm">
                                            <div class="stateDiv">
                                                    <div>
                                                    {% if v.status == 0 %}
                                                        待付款
                                                    {% elif v.status == 1 %}
                                                        已付款,待发货
                                                    {% elif v.status == 2 %}
                                                        待收货
                                                    {% elif v.status == 3 %}
                                                        已取消
                                                    {% endif %}
                                                    <br>
                                                    </div>
                                                  
                                            </div>
                                        </td>
                                        <td class="w125 center opreat b-t hidden-xs hidden-sm">
                                            <ul>
                                                <li class="more"><a href="#" target="_blank">查看详情</a></li>
                                            </ul>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                       <div class="am-u-lg-12 am-cf">

                        <div class="am-fr">
                            <ul class="am-pagination tpl-pagination">
                               <!--  <li class="am-disabled"><a href="#">«</a></li>
                                <li class="am-active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">»</a></li> -->
                                <!-- {#% load pagetag %#} -->
                                {% load pagetag %}

                                <!-- {% showpage orderlist.paginator.num_pages request %} -->
                            </ul>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>  
</div>

{% endblock %}

{% block js %}
<script type="text/javascript">
    //回顶部
    backTop();
    //登录图片鼠标经过
    topLogin();
    //全选
    allSelect();
</script>

   

{% endblock %}